<template>
    <div v-loading="loading">
        <div class="flexSB">
            <div class="color999">作品数量 {{total}}</div>
            <div>
                <el-input placeholder="搜索关键字" v-model="query.keyword">
                    <i @click="search" class="el-icon-search size20 cursor-pointer" slot="suffix" style="margin-top: 10px;"></i>
                </el-input>
            </div>
        </div>
        <div v-if="data.length>0">
            <div @scroll="loadMoreData" class="scroll-box">
                <el-row :gutter="20">
                    <el-col :key="index" :span="8" v-for="(item, index) in data">
                        <long-video-item :data="item" :index="index" @chooseCollection="chooseCollection"></long-video-item>
                    </el-col>
                </el-row>
                <div class="text-center font-15 color-999 mt-10" v-if="append_loading">加载中...</div>
                <div class="text-center font-15 color-999 mt-10" v-if="data.length>=total">~没有更多了~</div>
            </div>
        </div>
        <div v-else>
            <el-empty :image="empty_image"></el-empty>
        </div>
    </div>
</template>

<script>
import pageTool from '@/mixins/page'
import longVideoItem from '@/components/long-video/item.vue'
export default {
    components: {
        longVideoItem,
    },
    data() {
        return {
            query: {
                creation_type: 'long',
                keyword: '',
                size: 12,
            },
            empty_image: require('@/assets/image/empty.png'),
        }
    },
    mixins: [pageTool],
    computed: {
        user_info() {
            return this.$store.state.user.user
        },
    },
    watch: {
        data(value) {
            console.log(value)
        },
    },
    mounted() {
        this.query.user_id = this.user_info.id
        this.beforeInit()
    },
    methods: {
        beforeInit() {
            this.url = '/creation-collection/long_video_list'
            this.append = true
            this.methods = 'post'
            this.init() //重新请求数据
        },
        loadMoreData(e) {
            if (e.srcElement.scrollTop + e.srcElement.clientHeight == e.srcElement.scrollHeight) {
                this.page++
                this.init()
            }
        },
        search() {
            this.page = 1
            this.data = []
            this.init()
        },
        chooseCollection(index) {
            let collection_id = this.data[index].collection_id
            this.$router.push('/mine/long/' + collection_id)
        },
    },
}
</script>

<style lang="scss" scoped>
.scroll-box {
    max-height: 650px;
    overflow-y: scroll;
}
.scroll-box::-webkit-scrollbar {
    display: none;
}
</style>